import 'ol/ol.css';

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Icon from 'ol/style/Icon';
import Style from 'ol/style/Style';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { Point } from 'ol/geom';
import Feature from 'ol/Feature';

const getScaleFactor = (view) => {
    return Math.pow(2, view.getZoom() - 10);
}

export const initialize = (id) => {

    const CENTER = [0.0, 0.0];
    const map = new Map({ target: id, layers: [] });
    const view = new View({ projection: "EPSG:3857", zoom: 10, center: CENTER });
    const vectorSource = new VectorSource();
    const layer = new VectorLayer({ vectorSource, visible: true });
    map.setView(view);
    map.addLayer(layer);


    // 用图片贴一个AHT试一试
    const geometry = new Point([116.397428, 39.908637]);
    const aht = new Feature({ geometry });
    const container1 = new Feature({ geometry });
    const container2 = new Feature({ geometry });
    vectorSource.addFeature(aht);
    vectorSource.addFeature(container1);
    vectorSource.addFeature(container2);
    const rotation = Math.PI / 3;

    // AHT本体
    aht.setStyle(new Style({
        image: new Icon({
            src: "/aht.png",
            anchor: [0.5, 0.5],
            rotation,
            scale: 0.5 * getScaleFactor(view)
        }),
    }));
    aht.getStyle().getImage().updateSacle = () => {
        const icon = aht.getStyle().getImage();
        icon.setScale(0.5 * getScaleFactor(view));
    }

    // AHT的负载集装箱
    container1.setStyle(new Style({
        image: new Icon({
            src: "/container-border.png",
            anchor: [0.5, 1.1],
            rotation,
            scale: 0.13 * 0.5 * getScaleFactor(view)
        }),
        zIndex: 1,
    }));
    container1.getStyle().getImage().updateSacle = () => { // 这里侵入式的添加一个适应缩放的函数
        const icon = container1.getStyle().getImage();
        icon.setScale(0.13 * 0.5 * getScaleFactor(view));
    }

    container2.setStyle(new Style({
        image: new Icon({
            src: "/container-border.png",
            anchor: [0.5, -0.15],
            rotation,
            scale: 0.13 * 0.5 * getScaleFactor(view)
        }),
        zIndex: 1,
    }));
    container2.getStyle().getImage().updateSacle = () => { // 这里侵入式的添加一个适应缩放的函数
        const icon = container2.getStyle().getImage();
        icon.setScale(0.13 * 0.5 * getScaleFactor(view));
    }

    view.on("change:resolution", () => {
        aht.getStyle().getImage().updateSacle();
        container1.getStyle().getImage().updateSacle();
        container2.getStyle().getImage().updateSacle();
    });

    const moveFeature = () => {
        const x = geometry.flatCoordinates[0];
        const y = geometry.flatCoordinates[1];
        const pixelCoord = map.getPixelFromCoordinate([x, y]);
        const speed = 800;
        const flipX = speed * Math.cos(Math.PI / 2 - rotation);
        const flipY = speed * Math.sin(-Math.PI / 2 + rotation);
        const integerPixelCoord = [Math.round(pixelCoord[0] + flipX), Math.round(pixelCoord[1] + flipY)];
        const geographicCoord = map.getCoordinateFromPixel(integerPixelCoord);
        geometry.setCoordinates(geographicCoord);
    }

    setInterval(() => { moveFeature(); }, 100);
};